<template>
  <view class="page">
    <view class="headerblock">
      <!-- 左侧文档 -->
      <view class="logo">
        <text>LOGO</text>
        <text>校务行 | 督学刷题</text>
      </view>
      <!-- 右侧积分 -->
      <view class="jifen">
        <text>积分</text>
      </view>
      <!-- 轮播 -->

      <!-- 上下tab-->
    </view>
    <!-- 轮播区域 -->
    <view class="swpierblock">
      <banner :position="1" height="180rpx"></banner>
    </view>
    <!-- tab导航栏  -->
    <view class="tabblock">
      <view class="tab">
        <image class="image" :src="tabPicture"></image>
        <!-- <view class="image"></view> -->
        <text class="title">督学收藏</text>
      </view>
      <view class="tab">
        <image class="image" :src="tabPicture"></image>
        <text class="title">收藏</text>
      </view>
      <view class="tab">
        <image class="image" :src="tabPicture"></image>
        <text class="title">收藏</text>
      </view>
      <view class="tab">
        <image class="image" :src="tabPicture"></image>
        <text class="title">收藏</text>
      </view>
    </view>

    <!-- 图标文本跳转 -->
    <view class="icontextblock">
      <text class="textleft">我的自 </text>
      <span class="corlortext">习</span>
      <text class="textright">学习日志></text>
      <!-- <uniicons type="right" size="10" color="red"></uniicons> -->
    </view>
    <!-- button切换按钮 -->
    <view class="btnchangeblock">
      <button class="btn" type="default" size="mini">自习室</button>
      <button class="btn" type="default" size="mini">排行榜</button>
    </view>
    <view class="cardblock">
      <view class="left">
        <view class="ranking">学习时长排行榜</view>
        <view class="text">
          <text class="ranking">1.4k人学习中</text>
        </view>
        <view class="button" style="">去自习</view>
      </view>
      <image class="image" :src="cart" style=""></image>
    </view>
    <!-- 图标文本跳转 -->
    <view class="icontextblock" style="margin-top: 6px">
      <text class="textleft">督学打卡</text>
      <span class="corlortext">活动</span>
      <text class="textright margin">体验更多></text>
      <!-- <uniicons type="right" size="10" color="red"></uniicons> -->
    </view>
    <uni-card class="pkblock">
      <view class="pk">
        <image class="image" :src="pkp" style=""></image>
        <text class="learn" style="display: block">参与打开比赛,赢取福利</text>
        <button class="btn" type="default" size="mini">去pk</button>
      </view>
    </uni-card>

    <div class="card3block">
      <uni-card class="card3">
        <view class="">
          <text class="learn">背2800单词</text>
          <button class="btn" type="default" size="mini">1月</button>
          <image class="image" :src="cart3"></image>
        </view>
      </uni-card>
      <uni-card class="card3">
        <view class="">
          <text class="learn">早起打卡挑战</text>
          <button class="btn" type="default" size="mini">1月</button>
          <image class="image" :src="cart3"></image>
        </view>
      </uni-card>
      <uni-card class="card3">
        <view class="">
          <text class="learn">雅思听力训练</text>
          <button class="btn" type="default" size="mini">1月</button>
          <image class="image" :src="cart3"></image>
        </view>
      </uni-card>
    </div>
  </view>
</template>

<script>
import uniicons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue"
import request from "../../utils/request"
import arrayUtils from "../../utils/arrayUtils"
import { getShowImage } from "@/utils"
import { getStaticUrl } from "@/utils/settings"
import banner from "@/components/banner.vue"
export default {
  computed: {
    appListRender() {
      return arrayUtils.toTwoDimensionalArray(this.appList, 5)
    },
  },
  components: { banner, uniicons },
  data() {
    return {
      appList: [],
      getStaticUrl,
      // switchIcon,
      currentExam: null,
      userInfo: null,
      currentTab: "题库大全",
      mode: "",
      tabPicture: require("./assets/iconuser.png"),
      cart: require("./assets/cart.png"),
      pkp: require("./assets/pk.png"),
      cart3: require("./assets/cart3.png"),
    }
  },

  methods: {
    // 获取图片
    getShowImage,
  },
}
</script>

<style lang="scss" scoped>
.page {

  //头部
  .headerblock {
    // 背景
    width: 100%;
    // 调控块高度
    height: 76rpx;
    background-color: rgba(255, 255, 255, 1);
    //background-color: pink;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logo {
      font-size: 30rpx;
      margin-left: 16rpx;
    }

    .jifen {
      width: 80rpx;
      /* 示例宽度，根据需要调整 */
      height: 75rpx;
      /* 示例高度，应与宽度相同以保持圆形 */
      /* 边框宽度和颜色 */
      line-height: 75rpx;
      border: 1rpx solid rgba(187, 187, 187, 1);

      border-radius: 50%;
      /* 关键属性，设置为50%以形成圆形 */
      text-align: center;
      overflow: hidden;
      background-color: rgba(255, 255, 255, 1);
      margin-right: 12rpx;
      font-size: 30rpx;
    }
  }

  // 轮播样式
  .swpierblock {
    border-radius: 20rpx;
    overflow: hidden;
  }

  // tab样式
  .tabblock {
    display: flex; // 默认就是row，所以不需要写flex-direction: row;
    background-color: #fff;
    justify-content: space-around;
    // 加个小间距

    margin-top: -16rpx;

    // gap: 10px; // 添加间隔，使各个.tab之间有空隙

    .tab {
      display: flex; // 这将保持图片和文字的默认垂直排列
      flex-direction: column;
      align-items: center; // 使图片和文字在 tab 内部居中对齐（根据你的需求，也可以是flex-start）

      background-image: url("./assets/iconbg.png");
      background-position: center;

      // background-size: 100rpx 50rpx;
      background-size: 100rpx 100rpx;

      background-repeat: no-repeat;
      width: 100%;

      // margin-left: 36rpx;



      .image {
        width: 50rpx;
        height: 50rpx;
        // margin-left: -26rpx;
        margin-top: 51rpx;
        // 都用背景引入就行了
        // background-image: url("./assets/iconbg.png");
        // background-position: center;
        // // background-size: 200px 150px;
        // background-size: cover;
        // background-image: url("./assets/iconbg.png");
        // background-position: 0, 5px;
        // background-repeat: no-repeat;


      }

      .title {
        margin-top: 25rpx;
        font-size: 30rpx;
        // 向下移动下
        transform: translateY(23%);
        // transform: translateX(-27%);
      }
    }
  }

  //图标文本
  .icontextblock {
    display: flex;
    /* 使用Flex布局 */
    align-items: center;
    /* 图标和文本垂直居中对齐 */
    gap: 5rpx;
    margin-bottom: -9rpx;
    margin-top: 20rpx;
    // margin-right: 402rpx;
    padding-right: 8rpx;
    white-space: nowrap;
    /* 禁止换行 */

    /* 图标和文本之间的间距，根据需要调整 */
    .textleft {
      background-color: rgba(255, 255, 255, 1);

      color: rgba(16, 16, 16, 1);
      font-size: 30rpx;
      font-family: Arial;
      // 加粗
      font-weight: bold;
      margin-left: 19rpx;

    }

    .corlortext {
      transform: translateX(-5%);
      color: green;
      font-size: 30rpx;
    }

    .textright {
      font-size: 30rpx;
      font-family: PingFangSC-regular;
      color: rgba(187, 187, 187, 1);
      margin-left: 448rpx;
    }

    // 字数多了后间距的调整
    .margin {
      margin-left: 387rpx;
    }
  }

  //切换按钮
  .btnchangeblock {
    padding-left: 10rpx;
    // padding-right: 10rpx;

    .btn {
      // /* 文本居中 */
      font-size: 31rpx;
      /* 调整字体大小 */
      border: 4rpx solid rgba(251, 193, 33, 0.74);
      width: 183rpx;
      height: 50rpx;
      line-height: 44rpx;
      background: while;
      border-radius: 36rpx;
      margin-left: 7rpx;
      margin-top: 17rpx;
      color: rgba(105, 99, 99, 1);
      // background-color: rgba(222, 218, 218, 1);
      background-color: rgba(255, 255, 255, 1);
    }
  }



  .cardblock {

    box-sizing: border-box;
    margin-top: 30rpx;
    background: var(--background-color);
    // box-shadow: 0 2px 6px 0 rgba(187, 187, 187, 0.5);
    border-radius: 20rpx;
    display: flex;
    padding: 20rpx;
    align-items: center;
    box-shadow: 0px 0px 6px 0px rgba(203, 203, 203, 1);
    width: 94.5%;
    margin-left: 20rpx;


    .image {
      width: 216rpx;
      height: 204rpx;
      margin-left: 165rpx;
    }

    .left {
      margin-left: 10rpx;

      .ranking {
        box-sizing: border-box;
        font-size: 32rpx;
      }

      .text {
        box-sizing: border-box;
        color: var(--text-color-light);
        font-size: 28rpx;
        margin-top: 14rpx;

        .ranking {}
      }

      .button {
        box-sizing: border-box;
        background: var(--theme-color);
        padding: 10rpx 0;
        width: 172rpx;
        text-align: center;
        border-radius: 30rpx;
        color: white;
        font-size: 30rpx;
        margin-top: 20rpx;
      }


    }

  }

  // 去pk
  .pkblock {

    // 去pk卡片
    .pk {
      display: flex;

      .image {
        width: 19vw;
        height: 20vw;
        margin-left: -20rpx;
      }

      .learn {
        margin-left: -120rpx;
        transform: translateX(50%);
        font-size: 12rpx;
        font-size: 30rpx;
        margin-top: 53rpx;
      }

      .btn {
        // margin-left: 10px;
        font-size: 31rpx;
        /* 调整字体大小 */
        width: 149rpx;
        height: 58rpx;
        line-height: 58rpx;
        // background: while;
        background-color: rgba(84, 189, 129, 1);
        color: rgba(255, 255, 255, 1);
        border-radius: 36rpx;
        margin-left: 58rpx;
        // 向墙边移动
        left: 124rpx;
        margin-top: 36rpx;
      }
    }

  }


  // 机型iphon5和大屏幕有问题
  .card3block {
    display: flex;
    justify-content: space-between;
    // flex-direction: column;
    // justify-content: center;
    align-items: center;
    padding-right: 50rpx;
    // overflow: auto;
    width: 100%;
    // width: 200vw;

    .card3 {
      // box-sizing: border-box;
      // margin-right: -63rpx;
      margin-top: -14rpx;
      // margin-right: -48rpx;
      margin-right: -50rpx;


      .learn {
        // margin-bottom: 10px;
        font-size: 30rpx;
        width: 60rpx;
        height: 48rpx;
        /* 根据需求调整间距 */
        white-space: nowrap;
        margin-top: -9rpx;
        margin-left: -15rpx;

      }

      .btn {
        // margin-left: 10px;
        font-size: 22.5rpx;
        /* 调整字体大小 */
        border: 4rpx solid rgba(251, 193, 33, 0.74);
        // width: 84rpx;
        width: 104rpx;
        height: 53rpx;
        // height: -49rpx;
        background: while;
        border-radius: 36rpx;
        // margin-top: 7px;
        margin-left: -10rpx;
      }

      .image {
        width: 135rpx;
        height: 101rpx;
        transform: translateX(40%);
      }
    }
  }
}
</style>
